<div ng-controller="GalleryCtrl">
	<div id='page-title' ng-style="{width:titleWidth()}">{{localize('Nav Pane', 'Gallery')}}</div>
	<div id='menu' class="gallery hideable" ng-style="{left: menuLeft, height: contentHeight()}" ng-mouseleave="previewItem(selected)">
		<div ng-repeat="item in galleryitems"
			 ng-class="{thumb:true, 
			 			medium: $index % 16 == 0 || $index % 16 == 6, 
						right: $index % 16 == 6,
						big: $index % 16 == 12,
						selected: selected == item}">
 			<img ng-src="{{item.image}}" align="middle"
				 ng-mouseover="previewItem(item)"				 
                 ng-style="{left:item.offsetx, top:item.offsety, 'max-width':item.zoom, 'max-height':item.zoom}"
				 ng-click="selectItem(item)">
 		</div>
	</div>
	<div class='menupopper' ng-click="popupMenu()" ng-class='{ glow: menuPopped, "hidden-true": (!menuCollapsed) }'>&#x2261;</div>

	<div id='content' class='preview' ng-style="{left: contentLeft, width: contentWidth(), height: contentHeight()}">
		<div class="view-container" class="view-frame" ng-repeat="item in galleryitems">
			<div class="preview-frame" ng-show='preview === item'>
				<img ng-src='{{item.image}}' ng-style="{'max-width': contentWidth()-30, 'max-height': contentHeight()-60}"/>
				<div class="nowrap-ellipses">{{item.artist}}</div>
				<div class="nowrap-ellipses"><a href="external:{{item.website}}">{{item.website}}</a></div>
			</div>
		</div>
	</div>
</div>